<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input type="text"  v-model.trim="studentObj.name"/>
    </div>
    <div>
      <span>年龄:</span>
      <input type="number" v-model.number="studentObj.age"/>
    </div>
    <div>
      <span>性别:</span>
      <select v-model="studentObj.gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="handlerFn">添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <thead>
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(obj, idx) in list" :key="obj.id">
            <td>{{ idx + 1 }}</td>
            <td>{{ obj.name }}</td>
            <td>{{ obj.age }}</td>
            <td>{{ obj.gender }}</td>
            <td>
              <button @click="delFn(idx)">删除</button>
              <button @click="showFn(obj)">编辑</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 学生列表 - 数组包对象格式
      list: [
        {
          id: 1,
          name: 'Tom',
          age: 19,
          gender: '男'
        },{
          id: 2,
          name: 'Jone',
          age: 21,
          gender: '女'
        }
      ],
      // v-model绑定的vue变量
      studentObj: {
        id: '',
        name: '',
        age: '',
        gender: '女'
      },
      // 是否处于编辑状态，默认值false，表示默认处于添加状态
      isEdit: false
    }
  },
  methods: {
    // 添加 或 修改
    handlerFn() {
      if (this.isEdit) {// 修改
        // 把表单收集到的值，重新赋值给数组中指定下标的对象即可
        const { id } = this.studentObj
        // 找当前要覆盖对象在数组中下标
        const idx = this.list.findIndex(item => item.id === id)
        if(idx !== -1)  {
          this.$set(this.list, idx, { ...this.studentObj })
        }
        // 重置编辑状态为false，可以进行添加操作
        this.isEdit = false
      } else {// 添加
        // 1. 非空校验
        const { name, age } = this.studentObj
        if(!name || !age) {
          alert('姓名或年龄不能为空')
          return
        }
        if(age <= 0) {
          alert('年龄需是正整数')
          return
        }
        // 2. 添加到数组中（组装好符合数组格式的对象）
        this.list.push({
          ...this.studentObj,
          id: this.list.length + 1
        })
        
      }
      // 3. 添加完清空表单
      this.studentObj.name = this.studentObj.age = ''
    },
    // 删除
    delFn(idx) {
      // 确定提示框
      if(window.confirm('确定删除么?')) {
        this.list.splice(idx, 1)
      }
    },
    // 点击编辑按钮做数据回显
    showFn(obj) {
      // 把两个对象都展开，在放到一个新对象中，好处两点：(重点语法)
      /*
       1. studentObj 与 obj 不存在引用关系了（各自独立了）
       2. 不会让studentObj缺失属性
      */
      this.studentObj = {
        ...this.studentObj,
        ...obj
      }
      // 设置为编辑状态
      this.isEdit = true
    }
  }
}
</script>

